<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 试题管理
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-select
                        class="handle-select mr10"
                        size="mini"
                        v-model="jobCode"
                        placeholder="岗位编码"
                        clearable
                >
                    <el-option
                            v-for="item in jobArr"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <el-select
                        class="handle-select mr10"
                            size="mini"
                            v-model="frameCode"
                            placeholder="技术栈编码"
                            clearable
                    >
                    <el-option
                            v-for="item in frameArr"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <el-input v-model="issue" clearable size="mini" style="width: 80px"       placeholder="问题" class="handle-select mr10"></el-input>

                <el-select
                        class="handle-select mr10"
                        size="mini"
                        v-model="rank"
                        placeholder="难度等级"
                        clearable
                >
                    <el-option
                            v-for="item in  rankArr"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                </el-select>
                <el-button type="primary" icon="el-icon-search" @click="search" size="mini">搜索</el-button>
            </div>
            <el-button @click='toAdd' type="primary" size="mini"  v-if="$_has('frameData:add')" class="handle-add mr10" style="margin-bottom: 10px">添加试题</el-button>
            <el-table
                    :data="tableData"
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
            >
                <el-table-column  type="expand" >
                    <template slot-scope="props">
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span>答案</span>
                            </div>
                            <div class="text item" style="word-wrap:break-word">
                                {{props.row.answer }}
                            </div>
                        </el-card>
                    </template>

                </el-table-column>
                <el-table-column prop="jobCode" label="岗位"   align="center">
                    <template slot-scope="scope">
                        <span  v-for="(item,index) in jobArr" v-if="scope.row.jobCode == item.value" @click="test" >{{item.label}} </span>
                    </template>
                </el-table-column>
                <el-table-column prop="frameCode" label="技术栈"  align="center">
                    <template slot-scope="scope">
                        <span  v-for="(item,index) in frameArr" v-if="scope.row.frameCode == item.value" @click="test" >{{item.label}} </span>
                    </template>
                </el-table-column>
                <el-table-column prop="issue" label="问题" show-overflow-tooltip align="center" width="300px">
                </el-table-column>
                <el-table-column prop="rank" label="难易等级"  align="center">
                    <template slot-scope="scope">
                        <span  v-for="(item,index) in rankArr" v-if="scope.row.rank == item.value" @click="test" >{{item.label}} </span>
                    </template>
                </el-table-column>
<!--                <el-table-column prop="answer" label="答案" >-->
<!--                    <template slot-scope="scope">-->
<!--                        <el-popover title="详细" trigger="hover" placement="top" width="200">-->
<!--                            <p>{{ scope.row.answer }}</p>-->
<!--                            <div slot="reference">-->
<!--                                <p size="medium" style="white-space: nowrap;overflow: hidden;text-overflow:ellipsis;">{{ scope.row.answer}}</p>-->
<!--                            </div>-->
<!--                        </el-popover>-->
<!--                    </template>-->
<!--                </el-table-column>-->
                <el-table-column prop="createdDate" label="创建时间" width="180px"  align="center">
                </el-table-column>
                <el-table-column prop="createdBy" label="创建人" align="center" >
                </el-table-column>
                <el-table-column prop="updateBy" label="修改人"  align="center">
                </el-table-column>
                <el-table-column prop="updateDate" label="修改时间"  align="center">
                </el-table-column>
                <el-table-column label="操作" width="350"  align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="changePower(scope.$index, scope.row)" type="text"   icon="el-icon-edit">修改</el-button>
                    </template>
                </el-table-column>

            </el-table>
            <div class="pagination">
            <el-pagination
                    background
                    @current-change="handleCurrentChange" :page-size="10" :pager-count="11" layout="prev, pager, next" :current-page="pageCount" :total="total"
            ></el-pagination>
        </div>
        </div>
        <el-dialog :title="title" :visible.sync="addVisible" width="500px" :append-to-body='true'>
            <!--表单内容-->
            <el-form ref="form" :model="form" label-width="90px" :rules='rules' :hide-required-asterisk='true'>
                <el-form-item label="岗位编码" prop="jobCode">
                    <el-select
                            v-model="form.jobCode"
                            placeholder="请选择"
                            clearable
                            size="mini" style="width: 300px"    class="handle-select mr10"
                    >
                        <el-option
                                v-for="item in jobArr"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="技术栈编码"  prop="frameCode">
                    <el-select
                            clearable size="mini" style="width: 300px"    class="handle-select mr10"
                            v-model="form.frameCode"
                            placeholder="请选择"
                    >
                        <el-option
                                v-for="item in frameArr"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="问题" prop="issue">
                    <el-input v-model="form.issue"  clearable size="mini" style="width: 300px"    class="handle-select mr10" ></el-input>
                </el-form-item>
                <el-form-item label="答案" prop="answer">
                    <el-input
                            type="textarea"
                            :autosize="{ minRows: 2, maxRows: 6 }"
                            v-model="form.answer"
                            resize="none"
                            size="mini" style="width: 300px"    class="handle-select mr10"
                    ></el-input>
                </el-form-item>
                <el-form-item label="难易等级"  prop="rank">
                    <el-select
                            clearable size="mini" style="width: 300px"    class="handle-select mr10"
                            v-model="form.rank"
                            placeholder="请选择"
                    >
                        <el-option
                                v-for="item in  rankArr"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item class='deviceManage-el-form-item information-el-form-item'>
                    <el-button type="primary" @click="onSubmit">确定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
<!--    <div class="dictionary">-->
<!--        <div class="order-filter">-->
<!--            <el-form inline style="margin-top: -10px">-->
<!--                <el-form-item label="岗位编码">-->
<!--                    <el-select-->
<!--                            class="size-full"-->
<!--                            size="mini"-->
<!--                            v-model="jobCode"-->
<!--                            placeholder="请选择"-->
<!--                            clearable-->
<!--                    >-->
<!--                        <el-option-->
<!--                                v-for="item in jobArr"-->
<!--                                :key="item.value"-->
<!--                                :label="item.label"-->
<!--                                :value="item.value">-->
<!--                        </el-option>-->
<!--                    </el-select>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="技术栈编码" >-->
<!--                    <el-select-->
<!--                            class="size-full"-->
<!--                            size="mini"-->
<!--                            v-model="frameCode"-->
<!--                            placeholder="请选择"-->
<!--                            clearable-->
<!--                    >-->
<!--                        <el-option-->
<!--                                v-for="item in frameArr"-->
<!--                                :key="item.value"-->
<!--                                :label="item.label"-->
<!--                                :value="item.value">-->
<!--                        </el-option>-->
<!--                    </el-select>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="问题">-->
<!--                    <el-input v-model="issue" clearable size="mini" style="width: 80px" ></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="难易等级" >-->
<!--                    <el-select-->
<!--                            class="size-full"-->
<!--                            size="mini"-->
<!--                            v-model="rank"-->
<!--                            placeholder="请选择"-->
<!--                            clearable-->
<!--                    >-->
<!--                        <el-option-->
<!--                                v-for="item in  rankArr"-->
<!--                                :key="item.value"-->
<!--                                :label="item.label"-->
<!--                                :value="item.value">-->
<!--                        </el-option>-->
<!--                    </el-select>-->
<!--                </el-form-item>-->
<!--                <el-button @click="search" type="primary"  size="mini" style="margin: 8px;">搜索</el-button>-->
<!--            </el-form>-->
<!--            <ul class="order-input-box">-->
<!--                <el-button @click='toAdd' size="mini" >添加步骤</el-button>-->
<!--            </ul>-->
<!--        </div>-->
<!--        <el-table :data="tableData" border style="width: 100%"  show-overflow-tooltip="true">-->
<!--            <el-table-column prop="jobCode" label="岗位" >-->
<!--                <template slot-scope="scope">-->
<!--                    <span  v-for="(item,index) in jobArr" v-if="scope.row.jobCode == item.value" @click="test" >{{item.label}} </span>-->
<!--                </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column prop="frameCode" label="技术栈">-->
<!--                <template slot-scope="scope">-->
<!--                    <span  v-for="(item,index) in frameArr" v-if="scope.row.frameCode == item.value" @click="test" >{{item.label}} </span>-->
<!--                </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column prop="issue" label="问题" >-->
<!--            </el-table-column>-->
<!--            <el-table-column prop="rank" label="难易等级" >-->
<!--                <template slot-scope="scope">-->
<!--                    <span  v-for="(item,index) in rankArr" v-if="scope.row.rank == item.value" @click="test" >{{item.label}} </span>-->
<!--                </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column prop="answer" label="答案" show-overflow-tooltip="true">-->
<!--            </el-table-column>-->
<!--            <el-table-column prop="createdDate" label="创建时间" >-->
<!--            </el-table-column>-->
<!--            <el-table-column prop="createdBy" label="创建人" >-->
<!--            </el-table-column>-->
<!--            <el-table-column prop="updateBy" label="修改人" >-->
<!--            </el-table-column>-->
<!--            <el-table-column prop="updateDate" label="修改时间" >-->
<!--            </el-table-column>-->
<!--            <el-table-column label="操作" width="350">-->
<!--                <template slot-scope="scope">-->
<!--                    <el-button size="mini" @click="changePower(scope.$index, scope.row)">修改</el-button>-->
<!--                </template>-->
<!--            </el-table-column>-->
<!--        </el-table>-->
<!--        <el-pagination @current-change="handleCurrentChange" :page-size="10"  layout="prev, pager, next" :current-page="pageCount" :total="total">-->
<!--        </el-pagination>-->
<!--        <el-dialog :title="title" :visible.sync="addVisible" width="400px" :append-to-body='true'>-->
<!--            &lt;!&ndash;表单内容&ndash;&gt;-->
<!--            <el-form ref="form" :model="form" label-width="100px" :rules='rules' :hide-required-asterisk='true'>-->
<!--                <el-form-item label="岗位编码" prop="jobCode">-->
<!--                    <el-select-->
<!--                            class="size-full"-->
<!--                            size="mini"-->
<!--                            v-model="form.jobCode"-->
<!--                            placeholder="请选择"-->
<!--                            clearable-->
<!--                    >-->
<!--                        <el-option-->
<!--                                v-for="item in jobArr"-->
<!--                                :key="item.value"-->
<!--                                :label="item.label"-->
<!--                                :value="item.value">-->
<!--                        </el-option>-->
<!--                    </el-select>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="技术栈编码"  prop="frameCode">-->
<!--                    <el-select-->
<!--                            class="size-full"-->
<!--                            size="mini"-->
<!--                            v-model="form.frameCode"-->
<!--                            placeholder="请选择"-->
<!--                            clearable-->
<!--                    >-->
<!--                        <el-option-->
<!--                                v-for="item in frameArr"-->
<!--                                :key="item.value"-->
<!--                                :label="item.label"-->
<!--                                :value="item.value">-->
<!--                        </el-option>-->
<!--                    </el-select>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="问题" prop="issue">-->
<!--                    <el-input v-model="form.issue" clearable size="mini" style="width: 80px" ></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="答案" prop="answer">-->
<!--                    <el-input-->
<!--                            type="textarea"-->
<!--                            :autosize="{ minRows: 2, maxRows: 6 }"-->
<!--                            v-model="form.answer"-->
<!--                            resize="none"-->
<!--                    ></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="难易等级"  prop="rank">-->
<!--                    <el-select-->
<!--                            class="size-full"-->
<!--                            size="mini"-->
<!--                            v-model="form.rank"-->
<!--                            placeholder="请选择"-->
<!--                            clearable-->
<!--                    >-->
<!--                        <el-option-->
<!--                                v-for="item in  rankArr"-->
<!--                                :key="item.value"-->
<!--                                :label="item.label"-->
<!--                                :value="item.value">-->
<!--                        </el-option>-->
<!--                    </el-select>-->
<!--                </el-form-item>-->
<!--                <el-form-item class='deviceManage-el-form-item information-el-form-item'>-->
<!--                    <el-button type="primary" @click="onSubmit">确定</el-button>-->
<!--                </el-form-item>-->
<!--            </el-form>-->
<!--        </el-dialog>-->
<!--    </div>-->
</template>

<script>
    import getData from '../../getData/api'
    export default {
        name: "dictionary",
        data(){
            return {
                pageCount:1,//当前页数
                tableData:[],
                total:1,//总条数\
                jobCode:'',
                jobArr:[],
                frameCode:"",
                frameArr:[],
                issue:"",
                rank:"",
                rankArr:[],
                addVisible:false,
                title:"添加字典",
                form:{
                    id:"",//id
                    jobCode:'',//岗位（字典里拿）
                    answer:"",//答案
                    frameCode:"",//技术栈（字典里拿）
                    issue:"",//问题
                    rank:"",//级别（字典里拿
                },
                rules:{//必填校验
                    jobCode: [{
                        required: true,
                        message: '岗位不能为空',
                        trigger: 'blur'
                    },],
                    answer: [{
                        required: true,
                        message: '答案不能为空',
                        trigger: 'blur'
                    }],
                    frameCode:[{
                        required: true,
                        message: '技术栈不能为空',
                        trigger: 'blur'
                    }],
                    issue:[{
                        required: true,
                        message: '问题不能为空',
                        trigger: 'blur'
                    }],  rank:[{
                        required: true,
                        message: '级别不能为空',
                        trigger: 'blur'
                    }],
                },
            }
        },
        methods:{
            test(){

            },
            //翻页触发
            handleCurrentChange(val) {
                //每次翻页都请求数据
                this.pageCount = val
                this.search()
            },
            //添加权限
            toAdd() {
                if (this.form.id!=''){
                    this.initFormData()
                }
                this.title="添加字典"
                this.addVisible = true;//添加字典的弹窗
            },
            //提交添加字典
            onSubmit() {
                //先校验form的必填项
                this.$refs['form'].validate((valid) => {
                    if(valid) {
                        let formData = new FormData();
                        Object.keys(this.form).forEach((key) => {
                            formData.append(key, this.form[key]);
                        });//转form-data，后台要求
                        if (this.form.id=='') {//id为空就是添加。不为空就是修改
                            getData.frameDataAdd(formData)
                                .then((res) => {
                                    this.search()
                                    this.addVisible = false;
                                    if (res.status==200){
                                        this.$message.success(res.message)
                                    }else {
                                        this.$message.error(res.message)
                                    }
                                })
                        }else {
                            getData.frameDataEdit(formData)
                                .then((res) => {
                                    this.search()
                                    this.addVisible = false;
                                    if (res.status==200){
                                        this.$message.success(res.message)
                                    }else {
                                        this.$message.error(res.message)
                                    }
                                })
                        }
                    } else {
                        return false;
                    }});
            },
            //弹出修改权限
            changePower(index,row){
                Object.keys(this.form).forEach(key => {
                    this.form[key] = row[key]
                })
                this.title="修改字典"
                this.addVisible=true
                console.log(this.form)
            },
            //请求权限List数据
            search(){
                let params = {
                    "pageNumber":this.pageCount,
                    "pageSize":10,
                };
                let formData = new FormData();
                Object.keys(params).forEach((key) => {
                    formData.append(key, params[key]);
                });//转form-data
                getData.frameDataList(formData)
                    .then(res=>{

                        this.tableData=res.data.rows

                        Object.keys(this.tableData).forEach((key) => {

                        });
                        this.total=res.data.total
                    })
            },
            getDict1007(){
                let params = {
                    typeCode:"1007"
                };
                let formData = new FormData();
                Object.keys(params).forEach((key) => {
                    formData.append(key, params[key]);
                });//转form-data
                getData.findByType(formData)
                    .then(res=>{
                        for(let i =0 ;i<res.data.length;i++) {
                            let resData = {}
                            resData.value=res.data[i].code;
                            resData.label=res.data[i].codeName;
                            this.frameArr.push(resData)
                        }
                    })
            },
            getDict1006(){
                let params = {
                    typeCode:"1006"
                };
                let formData = new FormData();
                Object.keys(params).forEach((key) => {
                    formData.append(key, params[key]);
                });//转form-data
                getData.findByType(formData)
                    .then(res=>{
                        for(let i =0 ;i<res.data.length;i++) {
                            let resData = {}
                            resData.value=res.data[i].code;
                            resData.label=res.data[i].codeName;
                            this.jobArr.push(resData)
                        }
                    })
            },
            getDict1008(){//难易程度
                let params = {
                    typeCode:"1008"
                };
                let formData = new FormData();
                Object.keys(params).forEach((key) => {
                    formData.append(key, params[key]);
                });//转form-data
                getData.findByType(formData)
                    .then(res=>{
                        for(let i =0 ;i<res.data.length;i++) {
                            let resData = {}
                            resData.value=res.data[i].code;
                            resData.label=res.data[i].codeName;
                            this.rankArr.push(resData)
                        }
                    })
            },
            initFormData() {//清空新增修改之类的所有数据
                this.form={
                    id:"",//id
                    code:"",//字典编码 （只允许8位数字）
                    codeName:"",//名称
                    typeCode:"",//类型编码
                    typeName:"",//类型名称
                }
            }
        },

        mounted() {
            this.search();
            this.getDict1007();//岗位
            this.getDict1006();
            this.getDict1008();//难易程度
            // console.log(this.$route)
        }
    }
</script>

<style scoped>
    @import '~assets/styles/main.css';
    /*搜索框*/
    .handle-box {
        margin-bottom: 10px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .table {
        width: 100%;
        font-size: 14px;
    }
    .red {
        color: #ff0000;
    }
    .mr10 {
        margin-right: 10px;
    }
    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
    .text {
        font-size: 14px;
    }

    .item {
        padding: 18px 0;
    }

</style>
